import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd-mobile'
import { UserCircleOutline } from 'antd-mobile-icons'
import { qding,shang } from '../../https/index'
// 计算rem值的工具函数
const rem = (px) => `${px / 16}rem`;
const item = ["全部", "待收货", "已完成", "已取消"]
const logid = sessionStorage.getItem("logid")
const Qding = () => {
    const [list, setList] = useState([])
    const [shlist, setShlist] = useState([])
    const getData = async () => {
        const res = await qding({logid})
        setList(res.data.orders)
    }


    const getShang = async()=>{
        const res = await shang({})
        setShlist(res.data.list)
    }
    useEffect(() => {
        getData()
        getShang()
    }, [])

    return (
        <div style={{
            backgroundColor: '#f5f5f5',
            minHeight: '100vh',
            fontFamily: 'Arial, sans-serif'
        }}>
            {/* 订单列表 */}
            {list.map(order => {
                return <div key={order._id} style={{
                    backgroundColor: '#fff',
                    margin: `${rem(10)} ${rem(15)}`,
                    borderRadius: rem(4),
                    overflow: 'hidden',
                    border: '1px solid #e0e0e0',
                    height: "50rem",
                    width: "100%"
                }}>
                    {/* 店铺信息 */}
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        padding: `${rem(10)} ${rem(15)}`,
                        borderBottom: '1px solid #f0f0f0',
                    }}>
                        <div style={{
                            width: "10rem",
                            borderRadius: rem(12),
                            backgroundColor: '#f8f8f8',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            marginRight: rem(8)
                        }}>
                            <UserCircleOutline />
                        </div>
                        {
                            shlist.map(ele=>{
                                if(ele._id==order.userId){
                                    return <div style={{ fontSize: "5rem", color: '#333' }} key={ele._id}>{ele.username}</div>
                                }
                            })
                        }
                        
                        <div style={{
                            marginLeft: 'auto',
                            fontSize: "5rem",
                            color: order.status === '待付款' ? '#e52222' :
                                order.status === '已取消' ? '#e52222' :
                                    order.status === '已付款' ? '#52c41a' : '#666',
                            fontWeight: 'bold'
                        }}>{order.status}</div>
                    </div>

                    {/* 商品信息 */}
                    <div style={{
                        display: 'flex',
                        padding: `${rem(15)}`,
                        borderBottom: '1px solid #f0f0f0'
                    }}>
                        <div style={{ marginRight: rem(10) }}>
                            <img src={order.image} alt="商品图片" style={{
                                width: "20rem",
                                borderRadius: rem(4)
                            }} />
                        </div>
                        <div style={{ flex: 1 }}>
                            <div style={{ fontSize: "4rem", color: '#333', marginBottom: rem(5) }}>{order.name}</div>
                            <div style={{ fontSize: "4rem", color: '#999', marginBottom: rem(5) }}>{order.description}</div>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <div style={{ fontSize: "4rem", color: '#e52222', fontWeight: "bold" }}>¥{order.price}</div>
                                <div style={{ marginLeft: 'auto', fontSize: "4rem", color: '#999' }}>x {order.num}</div>
                            </div>
                        </div>
                    </div>

                    {/* 操作按钮 */}
                    <div style={{
                        display: 'flex',
                        justifyContent: 'flex-end',
                        padding: `${rem(10)} ${rem(15)}`

                    }}>
                        <button style={{
                            marginLeft: rem(10),
                            padding: `${rem(6)} ${rem(12)}`,
                            fontSize: "4rem",
                            borderRadius: rem(4),
                            border: '1px solid #ddd',
                            backgroundColor: '#fff',
                            color: '#333',
                            width: "20rem"
                        }}>取消</button>
                        <button style={{
                            marginLeft: rem(10),
                            padding: `${rem(6)} ${rem(12)}`,
                            fontSize: "4rem",
                            borderRadius: rem(4),
                            border: '1px solid #ddd',
                            backgroundColor: '#fff',
                            color: '#333',
                            width: "20rem"
                        }}>支付</button>
                    </div>
                </div>
            })}
        </div>
    );
};

export default Qding;